<!--@author: 雷棨-->
<!--@date: 2025/09/25-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f2f2f2;
        }
        .login-container {
            width: 360px;
            margin: 100px auto;
            padding: 32px 24px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .login-container h2 {
            text-align: center;
            margin-bottom: 24px;
        }
        .login-container label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: 100%;
            padding: 8px 12px;
            margin-bottom: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .captcha-row {
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:12px;
        }
        .captcha-row img {
            height:40px;
            cursor:pointer;
            border:1px solid #ccc;
            border-radius:4px;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background: #0078d7;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .login-container button:hover {
            background: #005fa3;
        }
        .note {
            font-size: 12px;
            color: #666;
            margin-top: 8px;
            text-align:center;
        }
    </style>
</head>
<body>
<div class="login-container">
    <h2>登录</h2>
    <form action="/login" method="post" id="loginForm">
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" required>

        <label for="password">密码</label>
        <input type="password" id="password" name="password" required>

        <label for="captcha">验证码</label>
        <div class="captcha-row">
            <img id="captchaImg" src="captcha" alt="点击刷新验证码" title="点击刷新验证码"
                 onclick="this.src='captcha?ts=' + Date.now()">
            <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" required style="flex:1;">
        </div>

        <button type="submit">登录</button>
    </form>

</div>

<script>
    // 错误提示
    (function(){
        const params = new URLSearchParams(window.location.search);
        if (params.get('error') === '1') {
            alert('登录失败：用户名/密码或验证码错误。');
            // 刷新验证码
            const img = document.getElementById('captchaImg');
            if (img) img.src = 'captcha?ts=' + Date.now();
            if (window.history && window.history.replaceState) {
                const url = new URL(window.location);
                url.search = '';
                window.history.replaceState({}, '', url.toString());
            }
        }
    })();
</script>
</body>
</html>
